<template>
    <p class="g-name">{{ goodsList.name }}</p>
    <p class="g-desc">{{ goodsList.desc }}</p>
    <p class="g-price">
        <span>{{ goodsList.price }}</span>
        <span>{{ goodsList.oldPrice }}</span>
    </p>
    <div class="g-service">
        <dl>
            <dt>促销</dt>
            <dd>12月好物放送，App领券购买直降120元</dd>
        </dl>
        <dl>
            <dt>配送</dt>
            <dd>至
                <XtxCity :defaultAddress="defaultAddress" @changAddress="changAddress" />
            </dd>
        </dl>
        <dl>
            <dt>服务</dt>
            <dd>
                <span>无忧退货</span>
                <span>快速退款</span>
                <span>免费包邮</span>
                <a href="javascript:;">了解详情</a>
            </dd>
        </dl>
    </div>
    <GoodsSku :key="goodsList.id" @change="skuChange" />
    <XtxNumbox label="数量" v-model="countValue" :max="goodsList.inventory" />
    <XtxButton style="margin-top: 20px;" type="primary" @click="addToCartBtn">加入购物车</XtxButton>
</template>

<script>
export default {
    name: 'GoodName'
}
</script>

<script setup>
import { inject, ref, onUnmounted, computed } from 'vue'
import GoodsSku from './GoodsSku.vue'
import Message from '@/components/library/xtx-message'
import { useStore } from 'vuex'
const goodsList = inject('goodsList')
const defaultAddress = ref('广东省 广州市 天河区')
const store = useStore()

onUnmounted(() => {
    console.log('GOOdsName');
})

const changAddress = (fullLocation) => {
    defaultAddress.value = fullLocation
}

const countValue = ref(1)

const skuChange = (currSku) => {
    if (currSku.skuId) {
        goodsList.value.oldPrice = currSku.oldPrice
        goodsList.value.price = currSku.price
        goodsList.value.inventory = currSku.inventory
        goodsList.value.skuId = currSku.skuId
        goodsList.value.attrsText = currSku.attrsText
    }
}

const addToCartBtn = () => {
    // console.log('加入购物车业务开始', goods.value)
    const { id, name, mainPictures, price, inventory, skuId, attrsText } = goodsList.value

    // 判断是否选择了完整规格，没有 skuId 就提示用户
    if (!skuId) return Message({ type: 'warn', message: '请选择商品规格' })
    // 整个价格购物车商品的数据结构要参考 - 购物车列表的字段名
    const goodsItem = {
        id: id, // SPUID
        name: name, // 商品名称
        picture: mainPictures[0], // 图片
        price: price, // 加入时价格
        nowPrice: price, // 当前的价格
        stock: inventory, // 库存
        count: countValue.value, // 数量
        skuId: skuId, // SKUID
        attrsText: attrsText, // 规格文本
        selected: true, // 是否选中
        isEffective: true // 是否为有效商品
    }
    console.log(goodsItem)
    // 💥 因为购物车会分为本地版和服务器版，涉及到异步请求，所以要升级成 dispatch 调用 actions
    store.dispatch('cart/insertCart', goodsItem).then(res => {
        Message({ type: 'success', message: res })
    })

}

</script>

<style lang="less" scoped>
.g-name {
    font-size: 22px
}

.g-desc {
    color: #999;
    margin-top: 10px;
}

.g-price {
    margin-top: 10px;

    span {
        &::before {
            content: "¥";
            font-size: 14px;
        }

        &:first-child {
            color: @priceColor;
            margin-right: 10px;
            font-size: 22px;
        }

        &:last-child {
            color: #999;
            text-decoration: line-through;
            font-size: 16px;
        }
    }
}

.g-service {
    background: #f5f5f5;
    width: 500px;
    padding: 20px 10px 0 10px;
    margin-top: 10px;

    dl {
        padding-bottom: 20px;
        display: flex;
        align-items: center;

        dt {
            width: 50px;
            color: #999;
        }

        dd {
            color: #666;

            &:last-child {
                span {
                    margin-right: 10px;

                    &::before {
                        content: "•";
                        color: @xtxColor;
                        margin-right: 2px;
                    }
                }

                a {
                    color: @xtxColor;
                }
            }
        }
    }
}
</style>